<template>
    <div class="info">
        <div class="info-container">
            <h2 class="info-title">湖北省群众艺术馆介绍</h2>
            <span class="time">2017年11月17日</span>
            <p class="desc">湖北省群众艺术馆是隶属于湖北省文化厅的全民所有制公益性一类文化事业单位，湖北省非物质文化遗产保护中心设在该馆，与湖北省群众艺术馆一套班子两块牌子。</p>
            <p class="desc">根据《中华人民共和国公共文化服务保障法》、文化部《文化馆管理办法》等相关法律法规对省级文化馆工作职能的要求，结合实际，湖北省群众艺术馆主要承担示范指导群众文艺创作、策划组织群众文化活动、免费开放空间设施场地、开展群众文艺培训与普及、保护和利用非物质文化遗产、群众文艺理论研究、群众文化信息宣传和培训辅导基层文化队伍等8项职能。对应以上职能，该馆设党委办公室、馆办公室、财务部、文艺创作部、美术书法摄影部、社会文化服务部、省非物质文化遗产保护中心办公室、调查研究部、社会文化活动部、社会艺术考级培训部、动漫网络部、文艺培训部共11个部门。</p>
            <p class="desc">此外，我馆还挂牌11个：响应文化部行业规范管理号召，承担中国文化馆协会音乐创作委员会、湖北省群文学会的工作任务，引导国内、省际群众音乐创作和群众文化交流；接受省文化厅、省财政厅、省老龄委、省教育厅等政府部门委托，成立湖北省群星艺术团、湖北省老年艺术大学、湖北省少儿艺术团、社会艺术水平考级办公室，开展示范性艺术普及活动；落实国家政策要求，成立全省群众文化志愿者、全省社会文艺团队（全省百佳民营文艺社团）服务机构，开展社会文化服务；设立楚天画院（楚天书法院、楚天摄影院），展示群众书画摄影精品、促进行业学习交流；创办《荆楚群文》，承担《中国文化报》驻湖北记者站工作，扩大群众文化社会影响，宣传湖北文化建设成果等。</p>
            <p class="desc">随着国家依法保障公共文化服务体系建设、保障非物质文化遗产传承发展，对省级群艺馆工作的要求越来越高，数字文化馆、流动文化服务、社会化服务、艺术普及、中华优秀传统文化的传承发展等新内容、新要求赋予了群艺馆许多新的职能。</p>
            <h6 class="address-title">湖北省群众艺术馆联系方式</h6>
            <p class="address-text">地址：湖北省武汉市武昌区丁字桥路56号</p>
            <router-link to="/map">
                <img src="http://www.hbqyg.cn/uploadfiles/201711/17/2017111710354280961473.png" class="address-img" />
            </router-link>
            <a href="tel:027-87273230" class="info-phone">电话：(027)87273230</a>
            <a href="javascript:;" class="info-faxes">传真：(027)87275413</a>
            <span class="info-traffic">公共交通：</span>
            <span class="traffic-detail">电8，15路，320路，543路，587路至丁字桥涂家岭站</span>
        </div>
        <!-- 底部 -->
        <div class="info-fixed">
            <router-link to="/info" class="info-fixed-item active" replace>
                <i class="icon icon-item1"></i>
                <span class="desc">本馆介绍</span>
            </router-link>
            <router-link to="/tissue" class="info-fixed-item" replace>
                <i class="icon icon-item2"></i>
                <span class="desc">组织机构</span>
            </router-link>
            <router-link to="/policy" class="info-fixed-item" replace>
                <i class="icon icon-item3"></i>
                <span class="desc">政策法规</span>
            </router-link>
            <router-link to="/party" class="info-fixed-item" replace>
                <i class="icon icon-item4"></i>
                <span class="desc">党建工作</span>
            </router-link>
        </div>  
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        }
    }
</script>

<style lang="stylus" scoped>
    .info
        width: 100%
        height: 100%
        position: relative
        background: #fff
        padding-top: 20px
        .info-container
            padding: 0 20px 120px
            box-sizing: border-box
            width: 100%
            background: #fff
            .info-title
                font-size: 18px
                font-weight: 700
                width: 100%
                text-align: center
            .time
                font-size: 12px
                color: #888
                display: block
                width: 100%
                text-align: center
                margin: 10px 0 14px
            .desc
                font-size: 14px
                color: #353535
                line-height: 150%
                margin-bottom: 20px
                text-align: justify
            .address-title
                font-size: 14px
                color: #129cd7
                width: 100%
                text-align: center
                font-weight: 600
            .address-text
                font-size: 14px
                color: #000
                text-align: center
                width: 100%
                margin-top: 8px
            .address-img
                display: block
                width: 100%
                margin-top: 12px
            .info-phone,.info-faxes,.info-traffic,.traffic-detail
                font-size: 14px
                display: block
                width: 100%
                text-align: center
                color: #000
                margin-top: 10px
                line-height: 150%
    .info-fixed
            position: fixed
            bottom: 0
            height: 54px
            left: 0
            width: 100%
            background: #fff
            box-sizing: border-box
            padding: 0 15px
            display: flex
            align-items: center
            border-top: 1px solid rgba(7,17,27,.1)
            .info-fixed-item
                flex: 1
                overflow: hidden
                &.active
                    .icon-item1
                        background: url('./info-icon1-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item2
                        background: url('./info-icon2-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item3
                        background: url('./info-icon3-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                    .icon-item4
                        background: url('./info-icon4-active.png') no-repeat
                        background-size: 100% 100%
                    .desc
                        color: #0094d4
                .icon-item1
                    background: url('./info-icon1.png') no-repeat
                    width: 20px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item2
                    background: url('./info-icon2.png') no-repeat
                    width: 21px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item3
                    background: url('./info-icon3.png') no-repeat
                    width: 21px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
                .icon-item4
                    background: url('./info-icon4.png') no-repeat
                    width: 21px
                    height: 20px
                    background-size: 100% 100%
                    display: block
                    margin: 0 auto
                .desc
                    color: #a1a1a1
                    text-align: center
                    font-size: 12px
                    display: block
                    margin-top: 4px
</style>